<template>
	<!--用户端  商家配送订单详情 -->
	<view>
		<!-- <view class="head bg-white">
			<view class="name">
				<text>{{goods.address[0].name}}</text>
				<text class="phone">{{goods.address[0].phone}}</text>
			</view>
			<scroll-view scroll-y="true" style="overflow: hidden;" class="address">
				<view >{{goods.address[0].province+goods.address[0].city+goods.address[0].district+goods.address[0].address}}</view>
			</scroll-view>
		</view> -->
		<view class="main" style="margin-top: 10rpx;">
			<view v-for="(item,index) in goods.goods" :key="index" class="item flex">
				<image :src="url+item.main_image" mode=""></image>
				<view class="text_div">
					<view class="name flex-cb ">
						<text class="text">{{item.title}} {{item.spec_item_name}}</text>
						<text class="tuikuan" v-if="index == 0">
							{{goods.status==0?'待支付':goods.status==1?'待商家接单':goods.status==2?'配送中':goods.status==3?'已完成（待评价）'
							:goods.status==4?'退款中':goods.status==5?'退款完成':goods.status==7?'已评价':goods.status==-1?'已取消':'拒绝退款'}}
						</text>
					</view>
					<view class="pic flex justify-between">
						<text >原价:￥{{item.price}}</text>
						<text class="jifen">积分最多抵扣￥{{item.point_price}}</text>
					</view>
					<view class="numbar flex-cb">
						<text class="num_x">X{{item.number}}</text>
						<text>会员价:￥{{item.vip_price}}</text>
					</view>
				</view>
			</view>
			<view class="solid"></view>
			<view class="span flex justify-between">
				<view class="">
					<view class="text_span " v-if="goods.discount_method == 1">积分抵扣：￥{{goods.amount-goods.point_amount}}</view>
					<view class="text_span">商品数量：{{num}}</view>
					<view class="text_span">运费：{{goods.express_fee}}</view>
					<view class="text_span">总价：￥{{goods.discount_method==0?goods.amount:goods.discount_method==1?goods.point_amount:goods.vip_amount}}</view>
				</view>
			</view>
		</view>
		<view class="bg-white Address">
			<view class="num flex-cb">
				<text>商家地址</text>
			</view>
			<view class="num2 flex-cb">
				<text>{{shop.shop_province+shop.shop_city+shop.shop_district+shop.shop_address}}</text>
				<text class="cuIcon-dianhua" @click="$utils.callphone(shop.contact_phone)"></text>
			</view>
		</view>
		<view class="foot" >
			<view class="ddxx">订单信息</view>
			<view class="solid"></view>
			<view class="span_div flex-cb">
				<view class="left">
					<view>订单编号</view>
					<view>下单时间</view>
					<view v-if="goods.pay_time">支付时间</view>
					<view v-if="goods.confirm_time">送达时间</view>
					<view v-if="goods.cancel.cancel_instruction">取消理由</view>
					<view v-if="goods.cancel.created_at">取消时间</view>
				</view>
				<view class="right">
					<view>{{goods.order_no}}</view>
					<view>{{goods.created_at}}</view>
					<view v-if="goods.pay_time">{{goods.pay_time}}</view>
					<view v-if="goods.confirm_time">{{goods.delivery_time}}</view>
					<view v-if="goods.cancel.cancel_instruction">{{goods.cancel.cancel_instruction}}</view>
					<view v-if="goods.cancel.created_at">{{goods.cancel.created_at}}</view>
				</view>
			</view>
		</view>
		<view class="div" v-if="goods.refund">
			<view class="foot foot2" v-if="goods.status ==4||goods.status==5||goods.status ==-2">
				<view class="ddxx">退款信息</view>
				<view class="solid"></view>
				<view class="span_div flex-cb">
					<view class="left">
						<view>退款金额</view>
						<view>退款时间</view>
						<view>退款类型</view>
						<view>{{goods.refund.status == 0?'退款':'拒绝'}}原因</view>
						<view v-if="goods.refund">退款截图</view>
					</view>
					<view class="right">
						<view>￥{{goods.refund.refund_amount}}</view>
						<view>{{goods.refund.created_at}}</view>
						<view >{{goods.refund.refund_type_id==3?'协商退款':'部分退款'}}</view>
						<view>{{goods.refund.status == 0?goods.refund.refund_instruction:goods.refund.reject_reason||'无'}}</view>
						<view v-if="goods.refund" class="cuIcon-right" @click="$utils.lookimg(url+goods.refund.image)"></view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-x="true" class="bottom bg-white" enable-flex v-if="goods.status !== -1" >
			<view class="flex  align-center justify-end" :style="{paddingBottom:iphone/2 + 'rpx'}">
				<view class="button" @click="concat">联系商家</view>
				<view class="button"  @click="handleQx" v-if="goods.status == 0">取消订单</view>
				<view class="button button1" @click="qery(goods_id)" v-if="goods.status == 0">立即付款</view>
				<view class="button button1" @click="handleXgdz" v-if="goods.status == 1">修改地址</view>
				<view class="button button2" v-if="goods.status == 1" @click="QX">直接退款</view>
				<navigator :url="'./refund/refund?tuikuan=1&id='+goods_id " class="button" v-if="goods.status == 2|| goods.status == -2">申请退款</navigator>
				<view  class="button button1" v-if="goods.status == 3" @click="PJ">去评价</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				im_id:null,
				index:0,
				isshow:0,
				iphone:'',
				num:null,
				goods:{},
				goods_id:null,
				url:'',
				typelist:[],
				shop:''
			};
		},
		onLoad(option) {
			if(option.id == 0){
				this.isshow = 1
			}
			this.url = this.$base
			this.iphone = getApp().globalData.iphone
			this.goods_id = option.id
			
		},
		onShow() {
			this.getgoods(this.goods_id)
			
		},
		methods:{
			concat(){
				uni.navigateTo({
					url: `../../pages/TUI-Chat/chat?conversationID=C2C${this.im_id}`
				});
			},
			getgoods(id){
				this.$api.express_order_delivery({},id,1).then(res=>{
					console.log(res);
					this.goods = res.data
					this.im_id = res.data.uid
					this.$api.get_merchants({},this.goods.mch_id,1).then(res=>{
						console.log(res);
						this.shop = res.data
					})
					for (let i = 0; i < res.data.goods.length; i++) {
						this.num += this.goods.goods[i].number
					}
				})
			},

			navigata(){
				uni.navigateTo({
					url:'/pageA/chat?num=1' //联系卖家传1
				})
			},
			handleXgdz(){
				uni.navigateTo({
					url:'/pages/mine/Function list/address?goods_id='+this.goods.id,
				})
			},
			handleqrsh(){//确认收货
				uni.showModal({
					title:'确认收货',
					content:'确认收到货物了吗？确认后将无法退款',
					success(res) {
						if(res.confirm){
							this.$api.users_orders_confirm({},this.goods_id,1).then(res=>{
								if(res.code == 200001){
									this.getgoods(this.goods_id)
								}
							})
						}
					}
				})
			},
			PJ(){
				uni.navigateTo({
					url:"./refund/refund?tuikuan=0"+'&id='+this.goods_id
				})
			},
			QX(){//直接退款（商家未接单）
				let _this = this
				uni.showModal({
					title:'直接退款',
					content:'是否直接退款',
					success(res) {
						if(res.confirm){
							_this.$api.direct_refund({},_this.goods_id,1).then(res=>{
								if(res.code == 200001){
									_this.getgoods(this.goods_id)
								}
							})
						}
					}
				})
				// this.$api.cancel_refund({},this.goods_id,1).then(res=>{
				// 	if(res.code == 200001){
				// 		this.getgoods(this.goods_id)
				// 	}
				// })
			},
			handleQx(){
				this.$api.express_order_cancel({},this.goods.id,1).then(res=>{
					if(res.code == 200001){
						uni.navigateBack({
							delta: 1,
							animationDuration: 500
						})
					}
				})
			},
			qery(id){
				this.$api.merchant_pay({},id,1).then(res=>{
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						// orderInfo:res.data.prepay_id,
						 success:(r)=>{  
							 console.log(r,3);
							 this.$api.merchant_pay_notify({},id,1).then(res=>{
							 	console.log(res,'4');
							 	 if(res.code == 200001){
									 uni.showToast({
									 	title:"支付成功",icon:"none"
									 })
							 		 this.getgoods(id)
							 	 }
							 })
						 }, 
						 fail(err) {
						 	console.log(err);
						 }
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.Address{
		width: 710rpx;
		height: 190rpx;
		border-radius: 10rpx;
		margin: 10rpx auto;
		padding: 24rpx;
		text{
			font-size: 30rpx;
			color: #999999;
		}
		.num2{
			margin-top: 18rpx;
			text{
				font-size: 28rpx;
				color: #333333;
			}
			.cuIcon-dianhua{
				color: #1CD699;
				font-size: 34rpx;
			}
		}
	}
.head{
	width: 706rpx;
	height: 198rpx;
	border-radius: 20rpx;
	margin: 10rpx auto;
	padding: 30rpx 0 18rpx 22rpx;
	.name{
		font-size: 36rpx;
		color: #2F2F2F;
		font-weight: bold;
		.phone{
			font-size: 30rpx;
			color: #969696;
			font-weight: 400;
			margin-left: 22rpx;
		}
	}
	.address{
		width: 480rpx;
		height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 40rpx;
		margin-top: 20rpx;
	}
}
.main{
	width: 706rpx;
	height: auto;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 26rpx 0;
	margin: auto;
	.item{
		margin-bottom: 61rpx;
		padding: 0 20rpx 0 27rpx;
		image{
			width: 136rpx;
			height: 136rpx;
		}
		.text_div{
			flex: 1;
			margin-left: 19rpx;
			font-size: 28rpx;
			color: #333333;
			.name{
				height: 40rpx;
				.text{
					height: 40rpx;
					font-weight: bold;
				}
				.tuikuan{
					font-size: 30rpx;
					font-weight: 500;
					color: #1CD699;
				}
			}
			.pic{
				height: 40rpx;
				margin-top: 20rpx;
				.jifen{
					color: #FF6F10;
					font-size: 24rpx;
				}
			}
			.numbar{
				text{
					height: 33rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FF2E2E;
				}
				.num_x{
					font-size: 30rpx;
					font-weight: 500;
					color: #999;
				}
			}
		}
	}

	.span{
		padding-top: 24rpx;
		.text_span{
			font-size: 30rpx;
			color: #666;
			padding: 0 25rpx;
			margin-bottom: 20rpx;
		}
		image{
			width: 189rpx;height: 189rpx;
			margin-right: 15rpx;
		}
	}
	
}
.foot{
	width: 706rpx;
	height: auto;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin:  10rpx auto;
	.ddxx{
		height: 90rpx;
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		padding-left: 28rpx;
		padding-top: 20rpx;
	}
	.span_div{
		padding: 0 28rpx;
		margin-top: 29rpx;
		.left,.right{
			width: 120rpx;
			font-size: 30rpx;
			color: #666;
			line-height: 70rpx;
		}
		.right{
			width: 360rpx;
			text-align: right;
		}
	}
}
.foot2{
	margin-bottom: 170rpx;
}
.bottom{
	width: 750rpx;
	min-height: 107rpx;
	padding: 27rpx 30rpx 10rpx 0;
	position: fixed;
	bottom: 0;
	left: 0;
	white-space: nowrap;
	.button{
		width: 210rpx;
		height: 70rpx;
		display: inline-block;
		margin-left: 12rpx;
		border-radius: 70rpx;
		font-size: 30rpx;
		line-height: 70rpx;
		text-align: center;
		color: #999999;
		border: 2px solid #B8B8B8;
	}
	.button1{
		background: #1CD699;
		color: #fff;
		border: none;
	}
	.button2{
		background:#FF2E2E ;
		color: #fff;
		border: none;
	}
}
.solid{
	width: 690rpx;
	margin: 0 8rpx;
}
.div{
	.foot{
		width: 706rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin:  10rpx auto;
		.ddxx{
			height: 90rpx;
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
			padding-left: 28rpx;
			padding-top: 20rpx;
		}
		.span_div{
			padding: 0 28rpx;
			margin-top: 29rpx;
			.left,.right{
				width: 120rpx;
				font-size: 30rpx;
				color: #666;
				line-height: 70rpx;
			}
			.right{
				width: 360rpx;
				text-align: right;
			}
		}
	}
	.foot2{
		margin-bottom: 170rpx;
	}
}
</style>
